<!--  -->
<template>
    <el-timeline>
        <div style="overflow: hidden;">
            <el-button style="float: right;" type="primary" plain @click="delHistory">清空历史</el-button>
        </div>
        <el-timeline-item class="bg" v-if="JSON.stringify(history) != '{}'" v-for="(item, index) in history" :key="index" center :timestamp="index" placement="top" @click="showArticle(item)">
            <el-card>
                <div
                    style="
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                    "
                    >
                    <div
                        style="
                        width: 100px;
                        height: 100px;
                        border-radius: 10%;
                        overflow: hidden;
                        margin-right: 20px;
                        "
                    >
                        <img
                        style="width: 100%; height: 100%; object-fit: cover"
                        :src="item.cover"
                        alt=""
                        />
                    </div>
                    <div style="display: flex;flex: 1;flex-direction: column;width: 60%;">
                        <el-text><h2>{{ item.title }}</h2></el-text>
                        <el-text><h4>{{ item.description }}</h4></el-text>
                    </div>
                    <div style="align-self: end;margin-bottom: 15px;">
                        <div style="display: flex;">
                            <el-avatar
                                :size="24"
                                class="mr-3"
                                :src="item.author_gravatar"
                            />
                            <el-text style="margin: 0px 10px;">{{ item.author }}</el-text>
                        </div>
                    </div>
                </div>
            </el-card>
        </el-timeline-item>
        <el-timeline-item v-else center :timestamp="new Date()" placement="top">
            <el-card>
                <h4>暂无数据</h4>
            </el-card>
        </el-timeline-item>
    </el-timeline>

</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus'

export default {
  name: 'History',
  components: {},
  props: {},
  data() {
    return {
        history:[]
    }
  },
  computed: {},
  watch: {},
  methods: {
    getHistory(){           
      axios.get('http://localhost:8888/article/history',{
        params:{
          u_id:this.$store.state.user.u_id
        }
      }).then(data=>{
        this.history = data.data.data
        console.log(this.history);
      })
    },
    delHistory(){           
      axios.get('http://localhost:8888/article/delHistory',{
        params:{
          u_id:this.$store.state.user.u_id
        }
      }).then(data=>{
        if(data.data.data){
            ElMessage({
            message: '上传成功.',
            type: 'success',
            })
        }
        this.$router.go(0)
      })
    },
    showArticle(item){ //点击文章跳转详细页面
      this.$router.push({path:'/article',query:{id:item.a_id}})
    },
  },
  created() {
    this.$store.state.lastActiveComponent = "history"
    this.getHistory()
  },
  mounted() {}
}
</script>

<style scoped>
.bg {
  cursor: pointer;
}
</style>
